<template>
  <div class="content">
    <div id="editLayer" class="editLayer">
      <div class="editMain">
        <el-select v-model="addType" class="addType" placeholder="请选择数据类型">
          <el-option
            v-for="(Obj,index) in typeList"
            :key="index"
            :value="Obj.value"
            :label="Obj.label">
          </el-option>
        </el-select>
        <el-input class="addTitle" v-model="addKey" placeholder="请输入key"></el-input>
        <el-input class="addValue" type="textarea" :rows="5" v-model="addValue" placeholder="请输入value"></el-input>
      </div>
      <div class="editFoot">
        <el-button class="serverRows-Sub" @click="add()" type="primary">确认</el-button>
      </div>
    </div>
    <div v-show="showSelectServer" id="shade" class="shade"></div>
    <div v-show="showSelectServer" id="select" class="select">
      <div class="serverRows">
        <el-select class="serverRows-input" v-model="selectedServer" placeholder="请选择redis服务器">
          <el-option
            v-for="(Obj,index) in server"
            :key="index"
            :value="Obj.server">
          </el-option>
        </el-select>
      </div>
      <div class="serverRows">
        <el-input class="serverRows-input" v-model="db" placeholder="请输入数据库id，默认是0"></el-input>
      </div>
      <div class="serverRows">
         <el-input class="serverRows-input" type="password" v-model="auth" placeholder="输入密码，没有为空"></el-input>
      </div>
      <div class="serverRows">
        <el-button class="serverRows-Sub" @click="selectServer()" type="primary">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { postData } from '../js/axios'
import store from '@/store'
export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      addValue: '',
      addKey: '',
      addType: '',
      showSelectServer: false,
      server: '', // 从服务器端获取的服务器列表
      selectedServer: '', // 选中的服务器
      db: '',
      auth: '',
      typeList: [
        { 'value': 'string', 'label': '字符串(string)' },
        { 'value': 'list', 'label': '列表(list)' }
      ]
    }
  },
  computed: {

  },
  created () {
    console.log(this.$store.state.selectedServer, this.$store.state.database, this.$store.state.auth)
    if (this.$store.state.selectedServer !== '' && this.$store.state.database !== '') {
      this.selectedServer = this.$store.state.selectedServer
      this.db = this.$store.state.database
      this.auth = this.$store.state.auth
    } else {
      this.showSelectServer = true
    }
    let Obj = {}
    Obj.type = 'select'
    postData('serverInfo.php', Obj)
      .then(res => {
        console.log('res:', res)
        this.server = res
      })
  },
  methods: {
    changeType: function () {
      if (this.addType === 'string') {
        this.addValue = '请输入value'
      } else if (this.addType === 'list') {
        this.addValue = '请每个list元素用英文逗号分割，例如 1,2,3,4'
      }
    },
    add: function () {
      let Obj = {}
      Obj.selectedServer = this.selectedServer
      Obj.db = this.db
      Obj.auth = this.auth
      Obj.key = this.addKey
      Obj.value = this.addValue
      Obj.type = this.addType
      if (this.addType === '') {
        this.showMessage('请选择数据类型', 'error', 1000)
        return false
      }
      if (this.addKey === '') {
        this.showMessage('请填写key', 'error', 1000)
        return false
      }
      if (this.addValue === '') {
        this.showMessage('请填写value', 'error', 1000)
        return false
      }
      postData('setValue.php', Obj)
        .then(res => {
          console.log('res:', res)
          if (res >= 1) {
            this.showMessage('添加成功', 'success', 1000)
            this.addKey = ''
            this.addValue = ''
          }
        })
    },
    selectServer: function () {
      console.log('select', this.selectedServer, this.db, this.auth)
      if (this.selectedServer === '') {
        // alert('请选择ip和端口')
        this.showMessage('请选择ip和端口', 'error', 1000)
        return false
      }
      let Obj = {}
      Obj.selectedServer = this.selectedServer
      Obj.db = this.db
      Obj.auth = this.auth
      if (Obj.db === '') { // 如果没有填写，默认是0
        Obj.db = 0
        this.db = 0
      }
      postData('login.php', Obj)
        .then(res => {
          console.log('res:', res)
          if (res === 'conError') {
            this.showMessage('ip和端口错误', 'error', 1000)
            return false
          } else if (res === 'authError') {
            this.showMessage('密码错误', 'error', 1000)
            return false
          } else if (res === 'dbError') {
            this.showMessage('数据库错误', 'error', 1000)
            return false
          } else {
            store.commit('setServer', this.selectedServer)
            store.commit('setDb', this.db)
            store.commit('setAuth', this.auth)
            this.showMessage('连接成功！', 'success', 800)
            setTimeout(() => {
              this.showSelectServer = false
            }, 800)
          }
        })
    },
    showMessage: function (message, type, time) {
      this.$message({
        message: message,
        type: type,
        duration: time
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.content
  width 1000px;
  height 450px;
  position absolute;
  left 0px;
  top 70px;
  .editLayer
    width 800px;
    height 300px;
    position absolute
    left 100px;
    top 50px
    z-index 90;
    background #fff;
    .editMain
      width 800px;
      height 320px;
      float left
      .addType
        width 750px;
        height 30px;
        line-height 30px;
        border-radius 5px;
      .addTitle
        width 750px;
        height 30px;
        line-height 30px;
        border-radius 5px;
        margin-top 20px;
      .addValue
        width 750px;
        height 230px;
        margin-top 20px;
        border-radius 5px;
        margin-left auto
        margin-right auto
        line-height 35px
        text-align left;
        vertical-align top;
        color #666
    .editFoot
      width 800px;
      height 50px;
      float left
      display flex
      justify-content center
      align-items center
      .editSub
        width 50px;
        height 25px;
        line-height 25px;
        background #036;
        color #fff;
        cursor pointer
        margin-left 5px;
        margin-right 5px;
  .shade
    position fixed
    left 0
    top 0
    bottom 0
    right 0
    z-index 100
    opacity 0.3
    background #333
  .select
    position absolute;
    left 250px;
    top 110px;
    width 500px;
    height 300px;
    margin 0 auto;
    background #fff;
    border-radius 5px;
    opacity 1;
    z-index 102;
    box-sizing border-box
    padding-top 30px;
    .serverRows
      width 400px
      height 50px;
      margin 0 auto;
      display flex;
      align-items center
      justify-content center;
      font-size 14px;
      .serverRows-input
        width 300px;
      .serverRows-Sub
        margin-top 50px;
</style>
